<template>
  <div class="order">
    <div class="orderPre">
      <div class="orderPreLeft">
        <div>
          <span class="word">退款金额</span>
          <span>{{ props.setOrders.tkxq_money }}</span>
        </div>
        <div>
          <span class="word">退款状态</span>
          <span>{{ props.setOrders.tk_state }}</span>
        </div>
        <div>
          <span class="word">来源</span>
          <span class="applet">{{ props.setOrders.tk_source }}</span>
        </div>
      </div>
      <div class="orderPreCentre">
        <div>
          <span class="word">退回路径</span>
          <span>{{ props.setOrders.tk_way }}</span>
        </div>
        <div>
          <span class="word">退款编号</span>
          <span>{{ props.setOrders.tk_number }}</span>
        </div>
        <div>
          <span class="word">业务类型</span>
          <span>{{ props.setOrders.tk_type }}</span>
        </div>
      </div>
      <div class="orderPreBelow">
        <div>
          <span class="word">卡内余额</span>
          <span>{{ props.setOrders.tk_balance }} (元)</span>
        </div>
        <div>
          <span class="word">退款时间</span>
          <span>{{ times }}</span>
        </div>
      </div>
    </div>
    <div class="orderNext">
      <div class="remark">
        <span class="word">订单备注</span>
        <input
          @focus="change"
          @blur="change"
          type="text"
          placeholder="请输入内容"
          :class="{ active: isState }"
          class="input"
          v-model="noteDatas"
        />
      </div>
      <div class="feature">
        <span @click="notes">保存</span>
        <span>取消</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import rTime from "../../../utils/api/f_time";
import { useRouter } from "vue-router";
import { steNodes } from "../../../utils/api/f_request";
const router = useRouter();
let times = rTime(props.setOrders.tk_time);
const props = defineProps(["setOrders"]);
// console.log(props.setOrders);
const isState = ref(false);
const change = () => {
  isState.value = !isState.value;
};
let noteDatas = ref("");
const notes = () => {
  let notes = noteDatas.value;
  let id = props.setOrders.tkxq_id;
  steNodes({ notes, id }).then((data) => {
    if (data.data.code == 200) {
      ElMessage({
        type: "success",
        message: "备注成功!",
      });
      setTimeout(() => {
        router.push("/home/pefund");
      }, 2000);
    }
  });
};
</script>

<style lang="scss">
.order {
  width: 100%;
  height: 430px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  .applet {
    padding-left: 32px;
  }
  .orderNext {
    width: 100%;
    height: 100%;
    .remark {
      margin-left: 5%;
      .input {
        margin-left: 4.2%;
        width: 500px;
        height: 40px;
        padding-left: 10px;
        border: 1px solid#e6f1ff;
      }
      .active {
        border: 1px solid #006eff;
        outline: 0px;
      }
    }
    .feature {
      width: 100%;
      span:nth-child(1) {
        margin-top: 40px;
        margin-left: 13%;
        display: inline-block;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        background-color: #006eff;
        margin-right: 1%;
        border-radius: 5%;
        cursor: pointer;
      }
      span:nth-child(2) {
        cursor: pointer;
        border-radius: 5%;
        display: inline-block;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #e6f1ff;
        color: #006eff;
      }
    }
  }
  .word {
    color: #b2aabd;
  }
  .orderPre {
    display: flex;
    flex-direction: row;
    .orderPreLeft {
      margin-left: 3%;
      width: 35%;
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
    .orderPreCentre {
      width: 34%;
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
    .orderPreBelow {
      span {
        margin: 0px 35px;
      }
      div {
        margin: 45px 0px;
      }
    }
  }
}
</style>